<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>vue的入门案例</title>
        <!-- 第1步：引入vue.js的脚本 -->
        <script type="text/javascript" src="../plugins/vue/vue.js"></script>

        <script type="text/javascript" src="../plugins/axios/axios.js"></script>
        <!-- 这里一定要注意js文件的导入顺序（原因：界面在加载时，所有界面中的代码，是从上到下依次加载）-->
        <script type="text/javascript" src="../js/main.js"></script>
    </head>
    <body>
        <div id="app">
            <button @click="sendData"> 点我发后台请求</button>

            <ul>
                <li v-for="item in dataList">
                    名称：{{item.name}},年龄:{{item.age}},邮箱：{{item.email}}

                </li>
            </ul>
        </div>

    </body>
    <script>
        /* 3. 在js脚本中，添加一个绑定vue到id=app的根标签*/
        new Vue({
            el: "#app",
            data: {
                dataList:[] //定义一个接收请求返回的集合数据
            },
            methods: {
                sendData(){
                    //在这里进行后台请求发送
                    this.$http.get('/getUserList').then(res=>{
                        //这里就是成功访问get中的url请求后，返回回来的数据
                        this.dataList = res.list;
                    })

                    // this.$http.post('/testpost',{"param1":"aaa","param2":"bbb"}).then(res=>{
                    //         //这里就是成功访问get中的url请求后，返回回来的数据
                    //     console.log(JSON.stringify(res))
                    //         // this.dataList = res.data.list;
                    //         this.dataList = res.list;
                    //     })

                }



            }

        })


    </script>
</html>
